<template>
	<div class="header">
		<div class="logo" @click="backHome">健康管理后台</div>
		<!--<div style="position: absolute; right: 230px;top: 25px; cursor: pointer;" @click="asd">
			<Badge count="88">
		        <Icon type="ios-bell-outline" size="26"></Icon>
		    </Badge>
		</div>-->
		<ul class="user-info clearfix">
			<li><Button type="text" icon='log-out' :loading='isSignOut' @click="signOut">退出</Button></li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isSignOut: false,
				token: {
					token: ''
				}
			}
		},
		methods: {
			asd(){
				this.$router.push({
					path: '/user/personal'
				})
			},
			// 回首页
			backHome(){
				this.$router.push('/home')
			},
			// 退出
			signOut(){
				this.token.token = localStorage.getItem('token'); //  获取token
				this.isSignOut = true;
				this.$http.post('http://192.168.6.87:8082/sso/logout', this.token)
				.then(({data})=>{
					
					if(data.status === 'success') {
						localStorage.clear();   //  清除全部信息
						this.$Message.success('退出成功!');
						this.isSignOut = false;
						this.$router.push('/')
					}
				})
				.catch((err)=>{
					console.log(err)
					this.$Notice.error({ title: '退出失败!' });
					this.isSignOut = false;
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 70px;
		color: #fff;
		background: #333;
		overflow: hidden;
		.logo {
			position: absolute;
			top: 0;
			left: 0;
			width: 250px;
			height: 100%;
			cursor: pointer;
			text-align: center;
			line-height: 70px;
			font-size: 20px;
			&:after {
				content: '';
				position: absolute;
				top: 20px;
				right: 0;
				width: 1px;
				height: 30px;
				background-color: #6c6c6c;
			}
		}
	}
	.user-info {
		position: absolute;
		top: 16px;
		right: 40px;
		li {
			float: left;
			font-size: 16px;
			line-height: 34px;
			margin: 0 20px;
			list-style: none;
			span {
				margin-left: 8px;
			}
			button {
				font-size: 16px;
				line-height: 34px;
				padding: 0 10px;
				color: #fff;
				&:hover {
					color: #0b9595;
				}
			}
		}
	}
</style>